<template>
  <div class="main">
    <div class="column">
        <div class="leftpanel1">
          222222222
        </div>
        <div class="leftpanel2"></div>
        <div class="leftpanel3"></div>
    </div>
    <div class="column">
        <div class="cneterpanel1"></div>
        <div class="cneterpanel2"></div>
    </div>
    <div class="column">
        <div class="rightpanel1"></div>
        <div class="rightpanel2"></div>
        <div class="rightpanel3"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  created() {},
  computed: {},
  methods: {},
};
</script>
<style lang="less" scoped>
.main {
//   background-color: red;
  display: flex;
  .column {
    flex: 3;
  }
  .column:nth-child(2) {
      flex: 5;
      margin: 0 10px 10px;
      overflow: hidden;
    }
    // 左
  .leftpanel1{
      height: 230px;
      background: url("../assets/img/网络规模.png") no-repeat;
      background-size: 100% 100%;
  }
  .leftpanel2{
      height: 280px;
      background: url("../assets/img/网络规模.png") no-repeat;
      background-size: 100% 100%;
  }
  .leftpanel3{
      height: 240px;
      background: url("../assets/img/网络规模.png") no-repeat;
      background-size: 100% 100%;
  }
  //中
  .cneterpanel1{
      height: 490px;
      background: url("../assets/img/地图.png") no-repeat;
      background-size: 100% 100%;
  }
  .cneterpanel2{
      margin: 10px 0 0 0;
      height: 240px;
      background: url("../assets/img/折线图.png") no-repeat;
      background-size: 100% 100%;
  }
//   右
  .rightpanel1{
      height: 280px;
      background: url("../assets/img/网络规模.png") no-repeat;
      background-size: 100% 100%;
  }
  .rightpanel2{
      height: 230px;
      background: url("../assets/img/网络规模.png") no-repeat;
      background-size: 100% 100%;
  }
  .rightpanel3{
      height: 240px;
      background: url("../assets/img/网络规模.png") no-repeat;
      background-size: 100% 100%;
  }
}
</style>
